<template>
  <content-field>
    <n-grid cols="10" item-responsive responsive="screen" x-gap="24">
      <n-gi span="0 m:2">
        <n-card> sss</n-card>
      </n-gi>
      <n-gi span="10 m:6">
        <n-card>
          <template #header>最近动态</template>
          <n-grid :cols="4">
            <n-gi :span="1">
              <n-statistic label="总计动态" :value="count">
                <template #prefix> </template>
                <template #suffix>篇</template>
              </n-statistic>
            </n-gi>
          </n-grid>
        </n-card>
        <br />
        <n-card
          ><n-pagination
            v-model:page="page"
            :page-count="Math.ceil(count / 10)"
            show-quick-jumper
          >
            <template #goto> 跳转至 </template>
          </n-pagination></n-card
        >
        <br />
        <n-grid :cols="1" y-gap="8">
          <n-gi v-for="essay of essaylist" :key="essay.id"
            ><essay-card :essay="essay"
          /></n-gi> </n-grid
      ></n-gi>
      <n-gi span="0 m:2">
        <n-card> sss</n-card>
      </n-gi>
    </n-grid>
  </content-field>
</template>

<script>
import ContentField from "@/components/ContentField.vue";
import EssayCard from "@/components/cards/EssayCard.vue";
import { ref, watch } from "vue";
import remoteData from "@/composables/RemoteData";
import { useMessage } from "naive-ui";

export default {
  components: { ContentField, EssayCard },
  setup() {
    let essaylist = ref([]);
    let count = ref(0);
    let page = ref(1);
    let next = ref("");
    let previous = ref("");
    const message = useMessage();
    const { get_essays } = remoteData();
    /**
     * 初始请求第一页
     */
    get_essays(1, essaylist, count).catch(() => {
      message.error("请求失败");
    });

    /**
     * page变化，请求新的页
     */
    watch(page, (newpage) => {
      get_essays(newpage, essaylist, count).catch(() => {
        message.error("请求失败");
      });
    });
    return {
      get_essays,
      essaylist,
      count,
      next,
      previous,
      page,
    };
  },
};
</script>

<style scoped>
.background {
  background-color: rgba(red, green, blue, 0);
}
</style>